<template>
    <div class="innerContainer">
        <common-title :text="`设备管理（${taskName}）`">
            <template #expand>

                <el-button type="primary" @click="onAdd">添加设备</el-button>
                <el-button type="primary" plain size="mini" @click="router.go(-1)">返回上一级</el-button>
            </template>
        </common-title>
        <div class="innerPane">
            <div class="filterArea">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="设备名">
                        <el-input @keyup.enter="search" v-model="searchForm.name" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="序号列">
                        <el-input @keyup.enter="search" v-model="searchForm.code" placeholder="请输入设备编码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button plain type="primary" @click="search">查询</el-button>
                        <el-button plain @click="onClear">重置</el-button>


                    </el-form-item>
                </el-form>
            </div>

            <el-table ref="tableRef" :data="tableData" border row-key="id" style="width: 100%; margin-top: 20px"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column header-align="center" type="selection" width="50" />
                <el-table-column header-align="center" type="index" label="序号" width="50" />

                <el-table-column header-align="center" prop="modelCode" label="产品型号" width="180" />
                <el-table-column header-align="center" prop="name" label="设备名" width="180" />
                <el-table-column header-align="center" prop="code" label="序号列" width="160" />
                <el-table-column header-align="center" prop="ipAddr" label="IP" width="160" />
                <el-table-column header-align="center" prop="port" label="PORT" width="160" />

                <el-table-column header-align="center" prop="remark" label="设备描述" />

                <el-table-column label="操作" header-align="center" width="180" prop="col9">
                    <template #default="scope">
                        <el-link plain type="primary" size="small" @click="onEdit(scope.row)">编辑</el-link>

                        <el-link plain type="warning" size="small" @click="onDel(scope.row)">删除</el-link>

                        <el-link plain type="danger" size="small" @click="onSetting(scope.row)">设置</el-link>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
                :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 查看弹出层 -->
        <detail-view ref="viewObj" @confirm="search"></detail-view>


        <Setting ref="setting" />
    </div>


</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";

import { onMounted, onUnmounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

import {
    getHardwareInfo,
    hardwareDel,
    getProductList,
} from "../../../utils/requests";

import DetailView from "./edit.vue";
import Setting from "./setting.vue";



const router = useRouter();

const tableRef = ref();

let modelList = ref([]);

// 用户数据
let tableData = ref([]);

let total = ref(0);

let taskName = ref("");

// 搜索条件
const searchForm = reactive({
    current: 1,
    size: 10,
    taskId: null, 
    msgProt: "ZIP",
});


onMounted(() => {

    taskName.value = router.currentRoute.value.query.taskName;

    searchForm.taskId = router.currentRoute.value.query.taskId;

    requestProductList();

    search();
});


const onClear = () => {
    searchForm.name = "";
    searchForm.code = "";

    search();
};

const handleSizeChange = (size) => {
    searchForm.size = size;
    searchForm.current = 1;
    search();
};
const handleCurrentChange = (current) => {
    searchForm.current = current;
    search();
};

const search = () => {
    getHardwareInfo(searchForm).then((res) => {
        tableData.value = res.records;
        total.value = res.total;
    });
};

const requestProductList = () => {
    getProductList().then((res) => {
        modelList.value = res;
    });

}

// 详情查看弹窗
const viewObj = ref();

//添加
const onAdd = () => {
    viewObj.value.openDialog(modelList.value, { taskId: searchForm.taskId });
};

//编辑
const onEdit = (row) => {
    let rowData = Object.assign({ _o: "w" }, row);
    viewObj.value.openDialog(modelList.value, rowData);
};

const onDel = (rowData) => {
    ElMessageBox.confirm("确定要删除该设备信息吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            const res = await hardwareDel({ ids: rowData.id });

            ElMessage.success("删除成功");
            searchForm.current = 1;
            search();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};


let setting = ref(null);

const onSetting = (row) => {
    setting.value.openDialog(row.code);
};

</script>

<style scoped>
.filterArea {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.filterArea .el-select {
    width: 120px;
}

.el-table .el-link {
    margin-right: 10px;
}
</style>
